<template>
  <div class="bar-chart-20 chart" ref="barChart20"></div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";
const barChart20 = ref(null);
const echarts = inject("$echarts");

// 参数
let xAxisData = ['常熟市', '太仓市', '张家港市', '昆山市', '吴中区', '吴江区', '高新区', '相城区']
let seriesData = [31.51, 21.74, 20.7, 7.18, 3.58, 12.66, 1.06, 1.85]

function getEcharts3DBar(xAxisData, data, colorType) {
  let colorArr = [];
  if (colorType == '01') {
    colorArr = ['#2886c6', '#50bfda', '#89e3ec'];
  } else if (colorType == '02') {
    colorArr = ['#28c1c6', '#50dac0', '#87e8c7'];
  } else {
    colorArr = ['#3828c6', '#5077da', '#878fe8'];
  }
  let color = {
    type: 'linear',
    x: 0,
    x2: 1,
    y: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: colorArr[0],
      },
      {
        offset: 0.5,
        color: colorArr[0],
      },
      {
        offset: 0.5,
        color: colorArr[1],
      },
      {
        offset: 1,
        color: colorArr[1],
      },
    ],
  };
  let barWidth = 20;
  let constData = [];
  let showData = [];
  data.filter(function (item) {
    if (item) {
      constData.push(1);
      showData.push(item);
    } else {
      constData.push(0);
      showData.push({
        value: 1,
        itemStyle: {
          normal: {
            borderColor: 'rgba(0,0,0,0)',
            borderWidth: 2,
            color: 'rgba(0,0,0,0)',
          },
        },
      });
    }
  });
  return {
    compCode: 'C202309028',
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#053962', // 设置背景色为半透明红色
      borderColor: '#165e9e', // 设置边框颜色
      borderWidth: 1,
      textStyle: {
        color: '#fff'
      },
      formatter: function (params) {
        let str = params[0].axisValue + '：';
        params.filter(function (item) {
          if (item.componentSubType == 'bar') {
            str += item.value + '万亩';
          }
        });
        return str;
      },
    },
    grid: {
      left: '3%', // 图表距边框的距离
      right: '3%',
      top: '15%',
      bottom: '5%',
      containLabel: true,
    },
    xAxis: {
      data: xAxisData,
      axisTick: {
        show: false,
      },
      axisLabel: {
        // 展示角度
        rotate: 45,
      },
    },
    yAxis: {
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
      },
    },
    series: [
      {
        z: 1,
        name: '数据',
        type: 'bar',
        barWidth: barWidth,
        barGap: '0%',
        data: data,
        itemStyle: {
          normal: {
            color: color,
          },
        },
      },
      {
        z: 2,
        name: '数据',
        type: 'pictorialBar',
        data: constData,
        symbol: 'diamond',
        symbolOffset: ['0%', '50%'],
        symbolSize: [barWidth, 10],
        itemStyle: {
          normal: {
            color: color,
          },
        },
        tooltip: {
          show: false,
          backgroundColor: '#053962', // 设置背景色为半透明红色
          borderColor: '#165e9e', // 设置边框颜色
          borderWidth: 1,
          textStyle: {
            color: '#fff'
          },
        },
      },
      {
        z: 3,
        name: '数据',
        type: 'pictorialBar',
        symbolPosition: 'end',
        data: showData,
        symbol: 'diamond',
        symbolOffset: ['0%', '-50%'],
        symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
        itemStyle: {
          normal: {
            borderColor: colorArr[2],
            borderWidth: 2,
            color: colorArr[2],
          },
        },
        tooltip: {
          show: false,
          backgroundColor: '#053962', // 设置背景色为半透明红色
          borderColor: '#165e9e', // 设置边框颜色
          borderWidth: 1,
          textStyle: {
            color: '#fff'
          },
        },
      },
    ],
  };
}
const option = getEcharts3DBar(xAxisData, seriesData, '02')


onMounted(() => {
  const chart = echarts.init(barChart20.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
